<template>
  <Codemirror
      v-model="codeStrTemp"
      :placeholder="props.placeholder"
      :style="{ height: `${props.mirrorHeight}`,width:`${props.mirrorWidth}` }"
      :autofocus="props.autoFocus"
      :indent-with-tab="props.indentWithTab"
      :tab-size="props.tabSize"
      :extensions="extensions"

      @ready="props.handleReady"
      @change="props.handleChange($event)"
      @focus="props.handleFocus($event)"
      @blur="props.handleBlur($event)"
  />
</template>


<script lang="ts" setup>
defineOptions({ name: 'CodeMirrorEditor' })

import { defineComponent, ref, shallowRef } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { oneDark } from '@codemirror/theme-one-dark'
import { EditorState } from '@codemirror/state'


const extensions = [javascript(), oneDark]


const props = defineProps({
  placeholder: {
    type: String,
    default: "请输入代码..."
  } ,
  codeStr: {
    type: String,
    default: ""
  } ,
  mirrorWidth: {
    type: String,
    default: "100%"
  } ,
  mirrorHeight: {
    type: String,
    default: "100%"
  } ,
  indentWithTab: {
    type: Boolean,
    default: true
  } ,
  autoFocus: {
    type: Boolean,
    default: true
  } ,
  tabSize: {
    type: Number,
    default: 2
  } ,
  handleReady: {
    type: Function,
    default: (payload) => {
      console.log('handleReady...',payload);
    }
  } ,
  handleChange: {
    type: Function,
    default: (event) => {
      console.log('handleChange...',event);
    }
  } ,
  handleFocus: {
    type: Function,
    default: (event) => {
      console.log('handleFocus...',event);
    }
  } ,
  handleBlur: {
    type: Function,
    default: (event) => {
      console.log('handleBlur...',event);
    }
  } ,
})

const codeStrTemp = ref(props.codeStr)


</script>
